<!-- 修改密码 -->
<template>
  <div class="content-psw">
    <span class="psw-tips">修改密码成功之后，需重新登录    !    !    !</span>
    <el-form :model="form" :rules="rules">
    
     <el-form-item label="密码" :label-width="formLabelWidth" prop="password">
      <el-input v-model="form.password" autocomplete="off" type="password" placeholder="6到16位（字母，数字，下划线，减号）"></el-input>
    </el-form-item>
    <el-form-item  :label-width="formLabelWidth" prop="password">
      <el-button type="primary" @click="submitUpload()">修  改</el-button>
    </el-form-item>
  </el-form>
  
  </div>
</template>

<script>
import { mapState } from 'vuex';
import qs from 'qs';
export default {
  data () {
    return {
        form:{
        password:''
      },
        formLabelWidth: '120px',
        rules:{
            password:[
            {required: true, message: '请输入密码', trigger: 'blur' },
            {
                validator:function(rule, value, callback){
                //用户名正则，4到16位（字母，数字，下划线，减号）
                var uPattern = /^[a-zA-Z0-9_-]{6,16}$/;
                if(!uPattern.test(value)){
                    callback(new Error('密码格式不正确！'))
                }else{
                    callback()
                }
                },
                trigger: 'blur'
            }
            ]
      }
    };
  },

  components: {},

  computed: {
      ...mapState(['userInfo'])
  },

  mounted() {},

  methods: {
      submitUpload() {
        this.$axios.post('/user/updatepsw', qs.stringify({loginname:this.userInfo.loginname,password:this.form.password})).then((data) => {
        if (data && data.code === 200) {
          this.$message({
            message: '操作成功,请重新登录！',
            type: 'success',
            duration: 2000,
            onClose: () => {
            // this.dialogFormVisible = false
            // this.getuserlist();
             this.$router.push('/login');
            }
        })
        } else {
        this.$message.error(data.msg)
        }
      }) 
    }
  },

  created(){}
}

</script>
<style lang='less' scoped>
.content-psw{
    width: 430px;
    margin: 100px  auto;
}
.psw-tips{
    position: absolute;
    font-size: 20px;
    left: 50%;
    transform: translate(-50%,106px);
    color: #fc0e2c;
}
</style>